
<template>

    <t-tabs v-model="value" @change="handlerChange" style="height: 100%">
      <t-tab-panel :value="1" label="榜眼数据" :destroy-on-hide="false" v-if="api_config_type==='2'">
      <div style="padding: 20px;">
        <t-form>
          <t-form-item :label="accesskey"  >
            <t-textarea :autosize="true" v-model="formData.access_key"  placeholder="请输入内容" />
            <t-input type="hidden" v-model="formData.type"  placeholder="请输入内容" />
          </t-form-item>
          <t-form-item>
            <t-space size="small">
              <t-button theme="primary" @click="save" >保存</t-button>
            </t-space>
          </t-form-item>
          <t-form-item>
            <t-link theme="primary"  href="https://www.tophubdata.com" target="_blank">
              <template #prefix-icon>
                <link-icon />
              </template>
              点击获取参数
            </t-link>
          </t-form-item>
        </t-form>


      </div>


      </t-tab-panel>
      <t-tab-panel :value="2" label="阿里百炼" :destroy-on-hide="false" v-if="api_config_type==='2'">
        <div style="padding: 20px;">
          <t-form>

            <t-form-item :label="accesskey"  >
              <t-textarea :autosize="true" v-model="formData.access_key"  placeholder="请输入内容" />
              <t-input type="hidden" v-model="formData.type"  placeholder="请输入内容" />
            </t-form-item>
            <t-form-item>
              <t-space size="small">
                <t-button theme="primary" @click="save" >保存</t-button>
              </t-space>
            </t-form-item>

            <t-form-item>
              <t-link theme="primary"  href="https://bailian.console.aliyun.com/?apiKey=1#/api-key" target="_blank">
                <template #prefix-icon>
                  <link-icon />
                </template>
                点击获取参数
              </t-link>
            </t-form-item>

          </t-form>

        </div>


      </t-tab-panel>
      <t-tab-panel :value="6" label="MINIMAX" v-if="api_config_type==='2'">
        <div style="padding: 20px;">
          <t-form>
            <t-form-item :label="appidName" >
              <t-input v-model="formData.appid" placeholder="请输入内容" />
              <t-input type="hidden" v-model="formData.type"  placeholder="请输入内容" />
            </t-form-item>
            <t-form-item :label="accesskey"  >
              <t-textarea :autosize="true" v-model="formData.access_key"  placeholder="请输入内容" />
            </t-form-item>
            <t-form-item>
              <t-space size="small">
                <t-button theme="primary" @click="save" >保存</t-button>
              </t-space>
            </t-form-item>
            <t-form-item>
              <t-link theme="primary"  href="https://www.minimax.io/platform/user-center/basic-information?key=66719005a427f0c8a5701643&document=T2A+V2" target="_blank">
                <template #prefix-icon>
                  <link-icon />
                </template>
                点击获取参数
              </t-link>
            </t-form-item>
          </t-form>

        </div>


      </t-tab-panel>
      <t-tab-panel :value="4" label="HeyGen"  v-if="api_config_type==='2'">
        <div style="padding: 20px;">
          <t-form>

            <t-form-item :label="accesskey"  >
              <t-textarea :autosize="true" v-model="formData.access_key"  placeholder="请输入内容" />
              <t-input type="hidden" v-model="formData.type"  placeholder="请输入内容" />
            </t-form-item>
            <t-form-item>
              <t-space size="small">
                <t-button theme="primary" @click="save" >保存</t-button>
              </t-space>
            </t-form-item>
            <t-form-item>
              <t-link theme="primary"  href="https://app.heygen.com/settings?nav=Subscriptions" target="_blank">
                <template #prefix-icon>
                  <link-icon />
                </template>
                点击获取参数
              </t-link>
            </t-form-item>
          </t-form>
        </div>


      </t-tab-panel>

      <t-tab-panel :value="8" label="蝉镜"  >
        <div style="padding: 20px;">
          <t-form>
          <t-form-item :label="appidName" >
            <t-input v-model="formData.appid" placeholder="请输入内容" />
            <t-input type="hidden" v-model="formData.type"  placeholder="请输入内容" />
          </t-form-item>
          <t-form-item :label="accesskey"  >
            <t-textarea :autosize="true" v-model="formData.access_key"  placeholder="请输入内容" />
          </t-form-item>
          <t-form-item>
            <t-space size="small">
              <t-button theme="primary" @click="save" >保存</t-button>
            </t-space>
          </t-form-item>
          <t-form-item>
            <t-link theme="primary"  href="https://www.chanjing.cc/home/" target="_blank">
              <template #prefix-icon>
                <link-icon />
              </template>
              点击获取参数
            </t-link>
          </t-form-item>
          </t-form>
        </div>


      </t-tab-panel>

    </t-tabs>




</template>


<script setup >
import { ref } from 'vue';
import {get,post} from "@/utils/api";
import config from "@/config";
import { MessagePlugin } from 'tdesign-vue-next';
import {LinkIcon} from "tdesign-icons-vue-next";
const value = ref(8);
const appidName = ref("app_id")
const accesskey = ref("secret_key")
const api_config_type = ref(localStorage.getItem('api_config_type'));

const handlerChange = (newValue) => {
  value.value = newValue;
  formData.value.type = newValue;
  switch (newValue){
    case 1:
      accesskey.value="Access Key";
      formData.value.name="榜眼数据"
      break;
    case 2:
      accesskey.value="API KEY";
      formData.value.name="阿里百炼"
      break;
    case 6:
      appidName.value="GroupId";
      accesskey.value="API KEY";
      formData.value.name="MINIMAX"
      break;
    case 4:
      accesskey.value="API Token";
      formData.value.name="HeyGen"
      break;
    case 7:
      accesskey.value="API Token";
      formData.value.name="影刀"
      break;
    case 8:
      appidName.value="app_id";
      accesskey.value="secret_key";
      formData.value.name="蝉镜"
      break;
  }

  getConfig()
};
const formData = ref({
  appid: '',
  access_key: '',
  type:1,
  name:"榜眼数据"
});
if(api_config_type.value==="2"){
  value.value=1
}else{
  appidName.value="app_id";
  accesskey.value="secret_key";
  formData.value.name="蝉镜"
  formData.value.type=8
}
const save = async () => {
  console.log(formData.value);
  try {
    const response = await post(config.saveConfig,formData.value); // Adjust API endpoint as needed
    if (response.status === 200) {
      const data = response.data;
      console.log(data)
      MessagePlugin.success('保存成功')
    } else {
      console.error('Failed to fetch feedback data');
      MessagePlugin.error('保存失败')
    }
  } catch(error) {
    MessagePlugin.error('保存失败')
  }
};
const getConfig = async () => {
  console.log("getConfig");
  try {
    const response = await get(config.getConfig,{type:value.value}); // Adjust API endpoint as needed
    if (response.status === 200) {
      const data = response.data.data;
      console.log(data)
      if (data == null){
        formData.value.appid=""
        formData.value.access_key=""

      }else{
        formData.value = {
          appid: data.appid,
          access_key: data.access_key,
          type:data.type,
          name:data.name
        };
      }

    } else {
      console.error('Failed to fetch feedback data');
    }
  } catch (error) {
    console.error('Error fetching feedback data:', error);
  }


};
getConfig();


</script>
<style scoped>

</style>
